<template>
  <van-dialog v-model:show="open" title="结果反馈" show-cancel-button @confirm="handleSubmit">
    <template #title>
      <div flex="main:center cross:center">
        <img :src="getImageUrl('badAnswer')" alt="" width="20" height="20" class="mr-8" />
        <div class="modal-title">结果反馈</div>
      </div>
    </template>
    <van-form ref="formRef">
      <van-field
        v-model="formObj.feedbackMsg"
        type="textarea"
        :rows="12"
        placeholder="输入您觉得回答不满意的地方"
      ></van-field>
    </van-form>
  </van-dialog>
</template>
<script setup>
import { ref, computed } from 'vue'
import { showNotify } from 'vant'
import { throwError } from '@/utils/util'
import { userFeedback } from '@/api/modules/home.api'

const emit = defineEmits(['update:modelValue', 'success'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  feebackParams: {
    type: Object,
    default: () => {},
  },
  shareId: {
    type: String,
    default: '',
  },
})
const formRef = ref(null)
const formObj = ref({
  id: props.feebackParams.id,
  feedbackResult: 'BAD',
  feedbackMsg: '',
})
const loading = ref(false)

const open = computed({
  get: () => props.modelValue,
  set: val => emit('update:modelValue', val),
})

function getImageUrl(name) {
  return new URL(`../../assets/images/${name}.svg`, import.meta.url).href
}

// function handleClose() {
//   open.value = false
//   formObj.value = {}
// }

async function handleSubmit() {
  loading.value = true
  try {
    formObj.value.id = props.feebackParams.id
    formObj.value.feedbackResult = props.feebackParams.feedbackResult
    await userFeedback(props.shareId, formObj.value)
    showNotify({ type: 'success', message: '反馈成功' })
    emit('success', formObj.value)
    open.value = false
    loading.value = false
  } catch (e) {
    throwError('app-chat/initChat', e)
  }
}
</script>
<style lang="stylus" scoped>
.modal-title{
  font-size 16px;
  line-height: 22px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #1d2129;
}
</style>
